import React from 'react';

// 登录站点信息设置
// 1， 钉钉APPID
const dingAppId = "dinguunbu3h8aycraapa"

// 2，跳转域名
// var siteUrl = "https://ms.gdyngl.com"
const siteUrl = "http://192.168.18.55:8000"

// props Item type
export type PropsItem = {
  APPID: string,
  REDIRECT_URI: string,
}

export default class Index extends React.Component {

  constructor(props: PropsItem) {
    super(props)
    this.state = {
      // 你们申请的appid
      APPID: dingAppId,
      // 跳转当前页面
      REDIRECT_URI: encodeURIComponent(siteUrl + "/autoLogin/dingTalk") // 授权码获取成功后，自动跳转处理页面
    }
  }

  componentDidMount() {
    // 直接使用钉钉的登录js构造二维码，不使用cdn
    // http://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js
    // @ts-ignore
    !function (window, document) {
      function d(a: { goto: string; style: string | number | boolean; href: string; width: string; height: string; id: string; }) {
        var e, c = document.createElement("iframe"),
          d = "https://login.dingtalk.com/login/qrcode.htm?goto=" + a.goto ;

        d += a.style ? "&style=" + encodeURIComponent(a.style) : "",
          d += a.href ? "&href=" + a.href : "",
          c.src = d,
          c.frameBorder = "0",
          // @ts-ignore
          c.allowTransparency = "true",
          c.scrolling = "no",
          c.width =  a.width ? a.width + 'px' : "365px",
          c.height = a.height ? a.height + 'px' : "400px",
          e = document.getElementById(a.id),
          // @ts-ignore
          e.innerHTML = "",
          // @ts-ignore
          e.appendChild(c)
      }
      // @ts-ignore
      window.DDLogin = d
    }(window, document);
    // @ts-ignore
    let URL = encodeURIComponent(`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${this.state.APPID}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${this.state.REDIRECT_URI}`)

      // 实例化对象
      // @ts-ignore
      var obj = window.DDLogin({
        id: "login_container",
        goto: URL,
        style: "border:none;background-color:#FFFFFF;",
        width: "100%",
        height: "400"
      });

      // 监听消息处理方法
      const handleMessage = (event: { data: any; origin: any; }) => {

        // 获取loginTempCode
        const loginTempCode = event.data;

        // 获取消息来源
        const origin = event.origin;

        // 拼接 url
        // @ts-ignore
        const url = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${this.state.APPID}&response_type=code&scope=snsapi_login&state=dinglogin&redirect_uri=${this.state.REDIRECT_URI}&loginTmpCode=${loginTempCode}`

        // 如果来源为https://login.dingtalk.com，则在当前窗口打开回调链接
        if (origin === 'https://login.dingtalk.com') {
          window.open(encodeURI(url), '_parent')
        }
      };
      // 监听iframe的消息
      if (typeof window.addEventListener != 'undefined') {
        window.addEventListener('message', handleMessage, false);
      } else { // @ts-ignore
        if (typeof window.attachEvent != 'undefined') {
          // @ts-ignore
          window.attachEvent('onmessage', handleMessage);
        }
      }
    }

  render(){
    return (
      <div id='login_container'></div>
    )
  }
}
